<template>
	<view>
		<view class="head_con" style="" @click="toback">
			<u-icon name="arrow-left" color="#fff" label="发布房屋" labelColor="#fff" space="6">
			</u-icon>
		</view>
		<view style="width:94%;margin-left:3%;">
			<view class="uni-flex-center">
				<view class="main-service uni-cell-90">
					<view class="user-list">
						<u-form>
							<view style="padding: 20rpx 30rpx;">
								<u-form-item label="标题名称" labelWidth="70" borderBottom>
									<u-input v-model="title" placeholder="简要概称" border="none"
										style="background-color: #FFFFFF;">
											
									</u-input>
								</u-form-item>
							</view>
							
							<view style="padding: 20rpx 30rpx;">
			
								<u-textarea v-model="content" :border="false" placeholder="简述房屋信息...">
								</u-textarea>
								<u-line></u-line>
							</view>
							<view style="margin-top: 20rpx;margin-left: 40rpx;">
								<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
									multiple :maxCount="9"></u-upload>
							</view>
			
							<view style="padding: 20rpx 30rpx;">
								<u-form-item label="租价" labelWidth="70" borderBottom>
									<u-input v-model="price" placeholder="只做参考价价格" border="none"
										style="background-color: #FFFFFF;">
										<template slot="suffix">
											元
										</template>
									</u-input>
								</u-form-item>
								<u-form-item label="面积" labelWidth="70" borderBottom>
									<u-input v-model="area" placeholder="输入面积" border="none"
										style="background-color: #FFFFFF;">
										<template slot="suffix">
											㎡
										</template>
									</u-input>
								</u-form-item>
								<u-form-item label="出租方式" labelWidth="70" borderBottom @click="showrent=true">
									<u-input
											v-model="rentname"
											disabled
											disabledColor="#ffffff"
											placeholder="请选择出租方式"
											border="none"
									></u-input>
									<u-icon slot="right" name="arrow-right"></u-icon>
								</u-form-item>
								<u-form-item label="居室" labelWidth="70" borderBottom @click="showhouse=true">
									<u-input v-model="housename" disabled disabledColor="#ffffff" placeholder="居室" border="none"
										style="background-color: #FFFFFF;">
											
									</u-input>
									<u-icon slot="right" name="arrow-right"></u-icon>
								</u-form-item>
								<u-form-item label="付款方式" labelWidth="70" borderBottom @click="showamount=true">
									<u-input v-model="amountname" disabled disabledColor="#ffffff" placeholder="付款方式" border="none"
										style="background-color: #FFFFFF;">
											
									</u-input>
									<u-icon slot="right" name="arrow-right"></u-icon>
								</u-form-item>
								<u-form-item label="楼层" labelWidth="70" borderBottom @click="showfloor=true">
									<u-input v-model="floorname" disabled disabledColor="#ffffff" placeholder="楼层" border="none"
										style="background-color: #FFFFFF;">
											
									</u-input>
									<u-icon slot="right" name="arrow-right"></u-icon>
								</u-form-item>
								<u-form-item label="朝向" labelWidth="70" borderBottom @click="showarrow=true">
									<u-input v-model="arrowname" disabled disabledColor="#ffffff" placeholder="朝向" border="none"
										style="background-color: #FFFFFF;">
											
									</u-input>
									<u-icon slot="right" name="arrow-right"></u-icon>
								</u-form-item>
								<u-form-item label="装修类型" labelWidth="70" borderBottom @click="showrenovation=true">
									<u-input v-model="renovationname" disabled disabledColor="#ffffff" placeholder="装修类型" border="none"
										style="background-color: #FFFFFF;">
											
									</u-input>
									<u-icon slot="right" name="arrow-right"></u-icon>
								</u-form-item>
								<u-form-item label="地址" labelWidth="70" borderBottom @click="getMapLocation">
									<u-input v-model="address" disabled disabledColor="#ffffff" placeholder="所在地址" border="none"
										style="background-color: #FFFFFF;">
			
									</u-input>
									<u-icon slot="right" color="#00828a" size="25" name="map-fill"></u-icon>
								</u-form-item>
								
							</view>
							<view class="user-list">
								<view style="padding:0 23rpx;font-size: 28rpx;color:#333;">设备</view>
								<view
									style="padding: 15rpx 20rpx; text-align: center; font-size: 24rpx; float: left; height: 40rpx;"
									v-for="(item,index) in types.equipment_type" :key="index">
										<view v-if="item.checked==true" class="btn-view" @click="topic(item.id, index)">
											<text>{{item.name}}</text>
										</view>
										<view v-else class="btn-view1" @click="topic(item.id, index)">
											<text>{{item.name}}</text>
										</view>
									
								</view>
								<view style="clear: both; height: 20rpx;"></view>
							</view>
							<view style="padding:0 30rpx;">
								<u-line></u-line>
							</view>
							<view class="user-list">
								<view style="padding:20rpx 23rpx 0;font-size: 28rpx;color:#333;">标签</view>
								<view
									style="padding: 15rpx 20rpx; text-align: center; font-size: 24rpx; float: left; height: 40rpx;"
									v-for="(item,index) in types.span" :key="index">
										<view v-if="item.checked==true" class="btn-view" @click="topicspan(item.id,index)">
											<text>{{item.name}}</text>
										</view>
										<view v-else class="btn-view1" @click="topicspan(item.id, index)">
											<text>{{item.name}}</text>
										</view>
								</view>
								<view style="clear: both; height: 20rpx;"></view>
							</view>
						</u-form>
			
					</view>
				</view>
			</view>
		</view>
		
		<u-toast ref="uToast"></u-toast>
		<u-picker :show="showfloor" :columns="floors" title="请选择您的小区" keyName="name" :maskCloseAble="true" confirm-color="#008987" @cancel="showfloor = false"
			@confirm="floorSelect">
		</u-picker>
		<u-action-sheet
				:show="showrent"
				:actions="types.rent_type"
				title="请选择出租方式"
				@close="showrent = false"
				@select="rentSelect"
		>
		</u-action-sheet>
		<u-action-sheet
				:show="showhouse"
				:actions="types.house_type"
				title="请选择居室"
				@close="showhouse = false"
				@select="houseSelect"
		>
		</u-action-sheet>
		<u-action-sheet
				:show="showamount"
				:actions="types.amount_type"
				title="请选择付款方式"
				@close="showamount = false"
				@select="amountSelect"
		>
		</u-action-sheet>
		<u-action-sheet
				:show="showarrow"
				:actions="types.arrow_type"
				title="请选择朝向"
				@close="showarrow = false"
				@select="arrowSelect"
		>
		</u-action-sheet>
		<u-action-sheet
				:show="showrenovation"
				:actions="types.renovation_type"
				title="请选择装修类型"
				@close="showrenovation = false"
				@select="renovationSelect"
		>
		</u-action-sheet>
		<u-button :customStyle="btnStyle" @click="release">发布</u-button>
		<view style="height:80rpx;"></view>
	</view>
</template>

<script>
	import {
		release,getRentType
	} from "@/service/rentService.js";
	export default {
		data () {
			return {
				btnStyle: {
					width: '96%',
					borderRadius: '40rpx',
					marginLeft: '2%',
					marginTop: '20rpx',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF',
				},
				title: '',
				content: '',
				area: '',
				price:'',
				address: '',
				location:[],
				type: 0,
				current: 0,
				spancurrent:0,
				themesList: [],
				fileList1: [],
				images: [],
				
				types: {},
				floors:[],
				showrent:false,
				rent_type:0,
				rentname:'',
				
				showhouse:false,
				housename:'',
				house_type:0,
				
				amount_type:0,
				amountname:'',
				showamount:false,
				
				floorname:'',
				floor_type:0,
				showfloor:false,
				
				arrow_type:0,
				arrowname:'',
				showarrow:false,
				
				renovation_type:0,
				renovationname:'',
				showrenovation:false,
				
				equipment_type:[],
				span:[]
			}
		},
		mounted() {
			getRentType().then(this.getRentType);
		},
		methods:{
			getRentType(e){
				if(e.code==200){
					this.types=e.result;
					this.floors=[e.result.floor_type];
				}
			},
			rentSelect(e){
				this.rentname=e.name;
				this.rent_type=e.id;
			},
			houseSelect(e){
				this.housename=e.name;
				this.house_type=e.id;
			},
			amountSelect(e){
				this.amountname=e.name;
				this.amount_type=e.id;
			},
			floorSelect(e){
				this.floorname=e.value[0].name;
				this.floor_type=e.value[0].id;
				this.showfloor=false;
			},
			arrowSelect(e){
				this.arrowname=e.name;
				this.arrow_type=e.id;
			},
			renovationSelect(e){
				this.renovationname=e.name;
				this.renovation_type=e.id;
			},
			toback(){
				uni.navigateBack()
			},
			topic(tid,index) {
				var that=this;
				this.current=tid;
				this.types.equipment_type[index].checked=!this.types.equipment_type[index].checked;
				if(this.equipment_type.indexOf(tid)==-1){
					this.equipment_type.push(tid)
				}else{
					that.equipment_type.splice(this.equipment_type.indexOf(tid),1)
				}
				// console.log(this.equipment_type)
				
			},
			topicspan(tid, index) {
				var that=this;
				this.spancurrent=tid;
				this.types.span[index].checked=!this.types.span[index].checked;
				if(this.span.indexOf(tid)==-1){
					this.span.push(tid)
				}else{
					that.span.splice(this.span.indexOf(tid),1)
				}
				// console.log(this.span)
				
			},
			getMapLocation () {
				var that=this;
			      // 判断是否有地理授权信息
			      uni.getSetting({
			        success: (res) => {
			          console.log('获取授权信息', res)
			          var status = res.authSetting
			          if (!status['scope.userLocation']) { // 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
			            uni.showModal({
			              title: '是否授权当前位置',
			              content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
			              success: (tip) => {
			                if (tip.confirm) {
			                  uni.openSetting({
			                    success: (data) => {
			                    // 如果用户授权了地理信息在，则提示授权成功
			                      if (data.authSetting['scope.userLocation'] === true) {
			                        uni.showToast({
			                          title: '授权成功',
			                          icon: 'success',
			                          duration: 1000
			                        })
			                        // 授权成功后，调用chooseLocation选择信息
			                        uni.chooseLocation({
			                          success: (res) => {
			                            // 这里获取到的res就是选择的地点的信息，包括经纬度，名称等
			                            console.log('详细地址', res)
										that.address=res.address;
										that.location[res.latitude,res.longitude]
			                          }
			                        })
			                      } else {
			                        uni.showToast({
			                          title: '授权失败',
			                          icon: 'none',
			                          duration: 1000
			                        })
			                      }
			                    }
			                  })
			                }
			              }
			            })
			          } else {
			            // 用户授权过，直接调用选择地址
			            uni.chooseLocation({
			              success: (res) => {
			                // 这里获取到的res就是选择的地点的信息，包括经纬度，名称等
			                console.log('详细地址', res)
							that.address=res.address;
							that.location[res.latitude,res.longitude]
			              }
			            })
			          }
			        },
			        fail: (res) => {
			          uni.showToast({
			            title: '调用授权窗口失败',
			            icon: 'none',
			            duration: 1000
			          })
			        }
			      })
			    },
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				this.images.splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://admin.gslhzhwy.com/api/upload/file', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'smart-property'
						},
						success: (res) => {
							let par = JSON.parse(res.data);
							if (par.code == 1) {
								this.images.push(par.data.url);
							}
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			release(){
				var that=this;
				var obj={};
				obj.title=this.title;
				obj.rent_type=this.rent_type;
				obj.amount_type=this.amount_type;
				obj.house_type=this.house_type;
				obj.floor_type=this.floor_type;
				obj.arrow_type=this.arrow_type;
				obj.renovation_type=this.renovation_type;
				obj.area=this.area;
				obj.content=this.content;
				obj.equipment_type=this.equipment_type;
				obj.span=this.span;
				obj.location=this.location;
				obj.address=this.address;
				obj.price=this.price;
				obj.images=this.images;
				release(obj).then(res =>{
					if(res.code==200){
						this.$refs.uToast.show({
							type: 'success',
							message: "提交成功",
							complete() {
								let pages = getCurrentPages();
								let beforePage = pages[pages.length - 2];
								beforePage.$vm.reFresh = Math.random()
								uni.navigateBack()
							}
						})
					}else{
						this.$refs.uToast.show({
											
							type: 'error',
							message: res.msg,
							complete() {
								
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.head_con{
		padding-top:95rpx;padding-left:20rpx;padding-bottom:35rpx;
		background-image: linear-gradient(to right, #00828a, #4aa6ac);
	}
	.btn-view {
		color: #FFFFFF;
		background-image: linear-gradient(to right, #4aa6ac, #00828a);
		border-radius: 30rpx;
		padding: 2rpx 25rpx;
		border: transparent 1rpx solid;
	}
	
	.btn-view1 {
		color: #666666;
		border: #666666 1rpx solid;
		border-radius: 30rpx;
		padding: 2rpx 25rpx;
		
	}
</style>